import { _decorator, Component, Node, Label, Button } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { clipboardm } from '../../../../scripts/managers/ClipboardManager';
const { ccclass, property } = _decorator;

@ccclass('Player')
export class Player extends BaseView {

    @property(Label)
    nameLabel: Label = null;

    @property(Label)
    patternLabel: Label = null;

    @property(Button)
    copyButton: Button = null;

    @property(Node)
    cardsNode: Node = null;

    playerName = ReactiveProperty.Create(null);

    pattern = ReactiveProperty.Create<any[]>([]);

    useObserves() {
        return [
            BindButton(this.copyButton).subscribe(this.copyButtonClicked.bind(this)),
            this.pattern.subscribe(_ => this.patternLabel.string = this.getPatternStr()),
            this.playerName.subscribe(_ => this.nameLabel.string = this.playerName.value),
        ];
    }

    copyButtonClicked() {
        console.log('copyButtonClicked');
        clipboardm.CopyToClipboard(this.getPatternStr());
    }

    getPatternStr() {
        let str = '';
        let split = '';
        for (let i = 0; i < this.pattern.value.length; i++) {
            let g = this.pattern.value[i];
            str += split;
            str += g.join(',');
            split = '|';
        }
        return str;
    }
}

